<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">

	</head>

	<body>
		<div class="mui-content" style="width: 100%; margin-top: 10px;">
			<div id="video-title" style="margin-left: 10px;">
				<h3 id="htitle"></h3>
			</div>

			<div id="video-content" style="text-align: center; margin-top: 10px;">
				<iframe id="mediaframe" class="video_iframe" style="" src="" allowfullscreen="" frameborder="0" height="240">
	
				</iframe>
			</div>
			<div id="video-desc" style="margin-top: 10px;">
				<span style="margin-left: 10px; font-size: 18px;" id="spVideoTitle"></span>
			</div>
			<div id="video-sets" style="display: block; width: 100%;">
			</div>
			
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/bus/pubfun.js"></script>
	<script>
		//var $videoCode = fun_getUrlForParams(window.location.href, "vidcode");
		var $wxfwid = localStorage.getItem("wcfwid");
		//var $currUrl = window.location.href;
		var $videoCode = getQueryString(window.location.search, "vidcode");
		//(($currUrl.split("?")[1] + "").split("&")[0] + "").split("=")[1];
		var $videoTit = decodeURI(getQueryString(window.location.search, "vidtit"));
		//decodeURI($currUrl.split("?")[1].split("&")[1].split("=")[1]);
		window.onload = function() {
			fun_loadVideoSets();
		}
		
		function fun_loadVideoSets(){
			mui.ajax({
				url: $request_url.getCourseVideoInfo,
				type: "get",
				dataType: "json",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					mediaType: "video",
					typeCode: $videoCode,
					orgId: $wxfwid,
					rows: 5,
					page: 0
				},
				success: function(dat) {
					if(dat.code == 0) {
						if(dat.result != null && dat.result.length > 0){
							document.getElementById("htitle").innerHTML = $videoTit;
							document.getElementById("spVideoTitle").innerHTML = "简介：" + dat.result[0].title;
							
							//默认添加第一个视频
							//var $videoDefHtml = document.getElementById("play-video")
							//var $vidElc = document.createElement('div');
							var $vidUrl = dat.result[0].url;
							$vidUrl = $vidUrl.replace('360','240').replace('640','310');
							document.getElementById("mediaframe").src = $vidUrl;
							//$vidElc.innerHTML = fun_videoTemplate(dat.result[0].url);
							//$videoDefHtml.appendChild($vidElc);
							
							//添加视频集
							var $videoArray = dat.result;
							//获取添加位置
							var $videoSetsAdr = document.getElementById("video-sets");
							for(var i = 0; i < $videoArray.length; i ++){
								//创建div元素
								var $vdiv = document.createElement('div');
								$vdiv.innerHTML = fun_videoSetsTemplate($videoArray[i], i);
								$videoSetsAdr.appendChild($vdiv);
							}
							
						} else {
							mui.toast("无相应数据源")
						}
					} else {
						mui.toast(dat.message);
					}
				},
				error: function(err) {
					mui.toast("服务繁忙");
				}
			});
		}

		mui("#video-sets").on("tap", "img", function(){
			//document.getElementById("play-video").innerHTML = "";
			//var $videoDefHtml = document.getElementById("play-video")
			//var $vidElc = document.createElement('div');
			//$vidElc.innerHTML = fun_videoTemplate(this.getAttribute("data"));
			//$videoDefHtml.appendChild($vidElc);
			document.getElementById("mediaframe").src = this.getAttribute("data");
		});
		
		function fun_videoSetsTemplate($video, $num){
			var $videoUrl = $video.url; 
			$videoUrl = $videoUrl.replace('360','240').replace('640','310');
			var $vidSetsHtml = 
				'<div style="margin:10px 10px 10px 10px;">'
				+	'<div><img id="img-play-video" data="'+ $videoUrl +'" class="mui-pull-left" src="../../img/mediaplayer.png" style="height: 90px; width:90px;"></div>'
				+	'<div style="margin-left:10px;"><div class="author"><h4>'+ $video.title +'</h4></div>'
				+	'<div style="line-height:120%;"><p overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;>'+ $video.contentAbstract +'</p></div>'
				+	'<div class="mui-card" style="margin-top:10px; background-color: #efeff4;">'
				+		'<ul class="mui-table-view" style="background-color: #efeff4;">'
				+			'<li class="mui-table-view-cell mui-collapse">'
				+				'<a class="" style="display:block; text-wrap:normal; background-color: #efeff4;color: blue;" href="#">查看详细</a>'
				+				'<div class="mui-collapse-content">'
				+					'<article style="line-height:130%;">'+ $video.content +'</article>'
				+				'</div>'
				+			'</li>'
				+		'</ul>'
				+	'</div></div>'
				+'</div>';
			return $vidSetsHtml;
		}

		function fun_videoTemplate($url) {
			var html =
				'<div style="text-align: center;">' +
				'<embed id="emb_video" style="text-align: center; width:100%" src="' + $url + '" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" height="360"></embed>' +
				'</div>';
			return html;
		}
	</script>

</html>